<template>
  <el-breadcrumb separator="/" id="breadcrumb">
    <el-breadcrumb-item :to="{ path: '/home/system' }">日志管理</el-breadcrumb-item>
    <el-breadcrumb-item>系统日志</el-breadcrumb-item>
  </el-breadcrumb>
  <tableList
      :dict="dict"
      :tableData="tableData"
      :tableConfig="tableConfig"
      @doit="tableDoit"
  />
  <deleteDialog
      :deleteDialogConfig="deleteDialogConfig"
  />
  <el-drawer v-model="drawerInfo" direction="ttb" size="250">
    <template #header>
      <h4>{{ info['id'] }} - 详细信息</h4>
    </template>
    <template #default>
      <div class="wos-flex wos-flex-column wos-flex-between" style="height: 90px">

        <div class="wos-flex wos-flex-row wos-flex-warp">
          <div>
            <span class="title">操作模块：</span>
            <span>{{ info['title'] }}</span>
          </div>
          <div>
            <span class="title">请求地址：</span>
            <span>{{ info['url'] }}</span>
          </div>
          <div>
            <span class="title">登录信息：</span>
            <span>{{ info['username'] }} / {{ info['userIp'] }} / </span>
          </div>
          <div>
            <span class="title">请求方式：</span>
            <span>{{ info['method'] }}</span>
          </div>
        </div>
        <div class="wos-flex wos-flex-row wos-flex-warp">
          <div>
            <span class="title">POST/PUT参数：</span>
            <span>{{ info['postQuery'] }}</span>
          </div>
          <div>
            <span class="title">GET/DELETE参数：</span>
            <span>{{ info['getQuery'] }}</span>
          </div>
          <div>
            <span class="title">返回参数：</span>
            <span>{{ info['code'] }} / {{ info['msg'] }}</span>
          </div>
        </div>
        <div class="wos-flex wos-flex-row wos-flex-warp">
          <div>
            <span class="title">浏览器：</span>
            <span>{{ info['userAgent'] }}</span>
          </div>

        </div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="drawerInfo=false">收起</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import tableList from '@/components/TableList.vue'
import deleteDialog from '@/components/DeleteDialog.vue'
import {ref, reactive, onMounted} from 'vue'
import {getlogininforList, delLog, exportLog, cleanLog} from "@/api/system/log-system.ts";
import {createDict} from "@/common/dict.ts";
import {ElMessage} from 'element-plus'

//table
import {table_config} from './tableConfig.js'


const drawerInfo = ref(false)
let tableConfig = reactive(table_config()) //表格配置
let tableData = ref([]) //表格数据
let search = reactive({})


let deleteDialogConfig:any = ref({
  visible: false,
  message: "是否删除",
  alertTitle: "警告",
  confirmText: "确认",
  cancelText: "取消",
  confirmFunction: () => {
  },
  cancelFunction: () => {
  }
}) //删除对话框配置
const dictKey = [] //本页面所需要的字典值
let dict = reactive({})

onMounted(async () => {
  dict = await createDict(dictKey) //模块字典值初始化
  await dataInit() //数据初始化
})

// const toDictValue = (dictKey, value) => {
//   return dictKeyToValue(dictKey, value, dict.dictIndex, dict.dictList)
// }

//数据初始化
async function dataInit() {
  //分页数据加载
  let page = {
    pageNum: tableConfig.pageNum,
    pageSize: tableConfig.pageSize
  }
  let data = Object.assign(page, search)
  //数据初始化
  const r = await getlogininforList(data)
  tableData.value = r.data
  tableConfig.total = r.total
}

let selection = [] //多选的数据
let info = reactive({})

//table事件调度中心
async function tableDoit(e) {
  const eventName = e.eventName, val = e.value
  // @ts-ignore
  tell.log('表格事件分析', eventName, val)
  switch (eventName) {
    case 'refresh': //数据重新加载
      await dataInit()
      break;
    case 'expand': //展开或回收列表
      tableConfig.defaultExpandAll = !tableConfig.defaultExpandAll
      break;
    case 'del': //展开或回收列表
      let ids:any = []
      selection.forEach((item:any) => {
        ids.push(item.id)
      })
      deleteDialogConfig.value = {
        visible: true,
        message: "是否删除选中的日志，删除后无法恢复数据。请再次确认！",
        alertTitle: "警告",
        confirmText: "确认",
        cancelText: "取消",
        confirmFunction: async () => {
          let result = await delLog(ids.toString())
          if (result.code == 200) {
            await dataInit()
            ElMessage({
              message: '已经清空所有日志',
              type: 'success',
            })
            deleteDialogConfig.value.visible = false
          } else {
            ElMessage({
              message: '数据错误，请管理员查看问题',
              type: 'warning',
            })
          }
        },
      }
      break;
    case 'clean': //清空日志
      deleteDialogConfig.value = {
        visible: true,
        message: "是否清空所有日志，删除后无法恢复数据。请再次确认！",
        alertTitle: "警告",
        confirmText: "确认",
        cancelText: "取消",
        confirmFunction: async () => {
          let result = await cleanLog()
          if (result.code == 200) {
            await dataInit()
            ElMessage({
              message: '已经清空所有日志',
              type: 'success',
            })
            deleteDialogConfig.value.visible = false
          } else {
            ElMessage({
              message: '数据错误，请管理员查看问题',
              type: 'warning',
            })
          }
        },
      }
      break;
    case 'view':
      info = val
      drawerInfo.value = true
      break;
    case 'selectionChange': //批量选择
      selection = val
      break;
    case 'search': //搜索
      search = val
      await dataInit()
      break;
    case 'export': //导出
      await exportLog()
      break;
    case 'handleSizeChange':
      tableConfig.pageSize = val
      await dataInit()
      break
    case 'handleCurrentChange': //点击分页
      tableConfig.pageNum = val
      await dataInit()
      break
    default:
      // @ts-ignore
      tell.log('未知组件事件', eventName, val)
  }
}
</script>
<style scoped lang="scss">
.content {
  padding-top: 20px;
}

.title {
  padding: 0 10px;
  border-left: 1px solid #dddddd;
  margin: 0 0 0 10px;
}
</style>